﻿@model SGIMail.Models.EventViewModel

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>
<div class="row">
    <div class="col-md-6">

        <h4>Event</h4>
        <hr />
        <dl class="dl-horizontal">
            <dt>
                @Html.DisplayNameFor(model => model.Name)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Name)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.Theme)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Theme)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.Date)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Date)
            </dd>
            <dt>
                Registered/Invited
            </dt>

            <dd>
                @Html.DisplayFor(model => model.participation)
            </dd>
            <dt>
                Invitation Picture
            </dt>

            <dd>
                <a href="@Url.Action("showImage", "Event", new { id = Model.id })"><img height=50 width=50 src="@Html.DisplayFor(model=> model.ImagePath)" alt="Alternate Text" /></a>

            </dd>
        </dl>
    </div>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            $.post('/Event/GetData', {},
            function (data) {
                var tdata = new google.visualization.DataTable();
                tdata.addColumn('string', 'activity');
                tdata.addColumn('number', 'Frequency');

                for (var i = 0; i < data.length; i++) {
                    tdata.addRow([data[i].activity, data[i].ContactCount]);
                }

                var options = {
                    title: 'Absolute frequency of activities for this event',
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
                chart.draw(tdata, options);
            }
            );
        }
    </script>

    <div class="col-md-6">
        <div id="chart_div1" style="width: 570px; height: 300px;">
        </div>
    </div>
</div>

<table class="table">
    <tr>
        <th>
            Invited
        </th>
        <th>
            Email
        </th>
        <th>
            Company
        </th>

        <th>
            Latest Activity
        </th>
    </tr>

    @foreach (var item in Model.contactList)
    {
        <tr>
            <td>
                @Html.ActionLink(item.Name, "Details", "Contacts", new { id = item.ID }, null)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Company)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LatestActivity)
            </td>
        </tr>
    }
</table>

<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.id }) |
    @Html.ActionLink("Back to List", "Index")
</p>
